<template>
    <div class="tag-container">
        <div class="tag-bar tags" :class="{hasActiveTag: activeTags.length, editing: editMode || !tags.length}">
            <transition-group
                tag="div"
                v-bind:css="false"
                v-on:before-enter="beforeEnter"
                v-on:enter="enter"
                v-on:leave="leave"
            >
                <a-tag v-for="tag in tags" :tag="tag" :editMode="editMode"
                    :active="isTagActive(tag._id)"
                    @set="setTag"
                    @unset="unSetTag"
                    @remove="removeTag"
                    @renameTag="propagation('renameTag', arguments)"
                    @editModeToggle="editModeToggle" :key="tag._id">
                 </a-tag>
            </transition-group>
                
                
        </div>
        <div class="tag-opt">
            <transition name="tag-opt-icon" mode="out-in">
                <i key="tagHelpInfo" class="material-icons align-middle text-info" v-if="!editMode && !activeTags.length && tags.length" data-toggle="tooltip" data-placement="bottom" title="帮助信息" :data-template="helpHTML" v-tooltip>help_outline</i>
                <i key="addTag" v-else-if="editMode || !tags.length" class="material-icons align-middle" data-toggle="tooltip" data-placement="bottom" title="新建标签" v-tooltip @click="createTag"> add </i>
                <i key="clearTag" v-else-if="activeTags.length" class="material-icons align-middle" data-toggle="tooltip" data-placement="bottom" title="清空标签" v-tooltip @click="clearActiveTags">cancel</i>
            </transition>
            
        </div>
    </div>
</template>

<script type="text/javascript">
import aTag from "./a-tag"
import $ from "jquery"
import ScrollBar from "smooth-scrollbar"

export default 
{
  name: 'tag-list',
  components: {
    aTag
  },
  props: {
    multiTag: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      required: true
    },
    activeTags: {
      type: Array,
      required: true
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      editing: false,
      helpHTML: `
        <div class="card mt-2">
          <dl class="card-body">
            <dt class="font-weight-bold">新建标签</dt>
            <dd class="ml-4 text-muted">右键单击标签 -> 点击加号</dd>
            <dt class="font-weight-bold">删除标签</dt>
            <dd class="ml-4 text-muted">右键单击标签 -> 点击标签右上角减号</dd>
            <dt class="font-weight-bold">重命名标签</dt>
            <dd class="ml-4 text-muted">右键单击标签 -> 双击标签</dd>
            <dt class="font-weight-bold">选择/取消 标签</dt>
            <dd class="ml-4 text-muted">单击标签</dd>
          </dl>
        </div>
      `
    }
  },
  computed: {
    tags() {
      var vm = this;
      var data = vm.data;
      console.log(data);
      var keys = Object.keys(data);
      return keys.map((x, i) => data[x]);
    },
    editMode() {
      return this.disabled ? false : this.editing;
    }
  },
  methods: {
    beforeEnter(el) {
        $(el).css('opacity', 0);
    },
    enter(el, done) {
        $(el).animate({
            opacity: 1
        }, function() {
            $(el).css('opacity', '');
            done();
        })
    },
    leave(el, done) {
        var $el = $(el);
        $el.animate({
            opacity: 0,
            marginTop: -$el.outerHeight() + 'px',
            marginLeft: 0,
            marginRight: -$el.outerWidth() + 'px'
        }, function() {
            done();
        })
        
    },
    isTagActive(_id) {
      return this.activeTags.indexOf(_id) !== -1;
    },
    createTag() {
        this.$emit('create-tag');
    },
    removeTag(tag) {
        this.$emit('remove-tag', tag);
    },
    setTag(_id) {
      var vm = this;

      if (vm.isTagActive(_id)) {
        return;
      }
      if (!vm.multiTag && vm.activeTags.length) {
        var arr = vm.activeTags.splice(0, vm.activeTags.length);
        vm.$emit('unset-tag', arr);
      }
      vm.activeTags.push(_id);
      vm.$emit('set-tag', _id);
    },
    unSetTag(_id) {
      var vm = this;

      if (!vm.isTagActive(_id)) {
        return;
      }
      var index = vm.activeTags.indexOf(_id);
      var arr = vm.activeTags.splice(index, 1);
      vm.$emit('unset-tag', arr);
    },
    clearActiveTags() {
      var vm = this;
      var arr = vm.activeTags.splice(0, vm.activeTags.length);
      vm.$emit('unset-tag', arr);
      vm.$emit('clear-tag', arr);
    },
    editModeToggle(_id) {
      var vm = this;
      vm.editing = !vm.editing;
      vm.editing ? vm.$emit('enter-edit-mode', _id) : vm.$emit('leave-edit-mode', _id);
    },
  },
  watch: {
    "multiTag": function(nv) {
      var vm = this;
      if (!nv && vm.activeTags.length > 1) {
        var _id = vm.activeTags[0];
        var arr = vm.activeTags.splice(1, vm.activeTags.length);
        vm.$emit('unset-tag', arr);
      }
    }
  },
  mounted() {
    ScrollBar.init(this.$el.querySelector('.tags'));
  },
  destroyed() {
    ScrollBar.destroy(this.$el.querySelector('.tags'));
  }
}
</script>

<style type="text/css">
    
.tag-bar {
  height: 3rem;
  padding: .5rem 0;
}

.tags {
  text-align: left;
  white-space: nowrap;
  width: auto;
  margin-left: 0;
  overflow: hidden;
  -webkit-transition: margin-left .3s;
     -moz-transition: margin-left .3s;
      -ms-transition: margin-left .3s;
       -o-transition: margin-left .3s;
          transition: margin-left .3s;
}

.tag-container {
  position: relative;
  overflow: hidden;
}

.tag-opt {
  position: absolute;
  top: 0;
  left: 0;
  width: 2rem;
  line-height: 2.5rem;
  z-index: 1;
  color: #555;
  cursor: pointer;
  user-select: none;
  -webkit-transform: translateX(-100%);
     -moz-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
       -o-transform: translateX(-100%);
          transform: translateX(-100%);
  -webkit-transition: transform .3s, color .3s;
     -moz-transition: transform .3s, color .3s;
      -ms-transition: transform .3s, color .3s;
       -o-transition: transform .3s, color .3s;
          transition: transform .3s, color .3s;
}

.tag-opt:hover {
  color: #efc16d;
}

.tag-opt-icon-enter-active,
.tag-opt-icon-leave-active {

  -webkit-transition: all .25s;
     -moz-transition: all .25s;
      -ms-transition: all .25s;
       -o-transition: all .25s;
          transition: all .25s;
}

.tag-opt-icon-enter {
  opacity: 0;
}

.tag-opt-icon-leave-to {
  opacity: 0;
}

.tags+.tag-opt,
.tags.editing+.tag-opt,
.tags.hasActiveTag+.tag-opt {
  -webkit-transform: translateX(0);
     -moz-transform: translateX(0);
      -ms-transform: translateX(0);
       -o-transform: translateX(0);
          transform: translateX(0);
}

.tags,
.tags.editing,
.tags.hasActiveTag {
  margin-left: 2rem;
}

.tags>.scroll-content {
  margin-top: -.5rem;
}



</style>